<template>
	<div class="common-layout">
		<el-container>
			<el-header height="auto">
				<Search
					ref="refSearch"
					:isSortShow="false"
					str4="今日新增用户"
					str5="500人"
					str6="累计用户总数"
					str7="5000人"
					str3="请输入用户ID或名称"
					@reset="reset"
					@myEvent="searchEvent"
				>
					<!-- 筛选区域 -->
					<div class="block">
						<IocnFont
							iconName="icon-shaixuan"
							color="rgb(45,72,195)"
						></IocnFont>
						<span class="option">筛选</span>
						<span class="demonstration">注册时间： </span>
						<el-date-picker
							class="data"
							v-model="timeQuantum"
							type="daterange"
							unlink-panels
							range-separator="至"
							start-placeholder="Start date"
							end-placeholder="End date"
						/>
					</div>
				</Search>
			</el-header>
			<el-main>
				<UserListVue></UserListVue>
			</el-main>

			<Footer
				ref="refFooter"
				str1="今日用户"
				str2="所有用户"
				:num1="1"
				:num2="state.total"
				:total="state.total === 0 ? 1 : state.total"
				:page-sizes="searchInfo[1]"
				@myEvent="pageHome"
				@myEvent2="pageNext"
				@myEvent3="pagePrev"
				@changePage="changePage"
				@toExcel="toExcel"
			></Footer>
		</el-container>
	</div>
</template>
<script setup>
// 引入search组件，上面的搜索部分
// import SearchVue from "./userManerge/Search.vue";
import Search from "../components/Search.vue";
import UserListVue from "./userManerge/UserList.vue";
import Footer from "../components/Footer.vue";
import { ref, reactive, onMounted } from "vue";
// 引入阿里图标
import IocnFont from "@/components/IocnFont.vue";
// 引数据接口、
import { getUserList } from "@/api/user.js";
// y引入仓库
import useDataStore from "../stores/user.js";

// 引入导出Excel工具
import { htmlToExcel } from "../utils/htmlToExcel";

import dayjs from "dayjs";
const { state } = useDataStore();

function tableToExcle() {
	// htmlToExcel()
	console.log("----------");
}

// 定义一个数组配置请求携带的参数
// searchInfo = [ 页码 , 页面容量 , 模糊查询 , 开始时间 , 结束时间 ]
const searchInfo = [1, 10, "", "", ""];

const timeQuantum = ref([]);
// 定义页码：初始值为 1
// const page = ref(1);

// 获取Footer组件实例
const refFooter = ref(null);
// 获取Search组件实例
const refSearch = ref(null);

onMounted(() => {
	// 数据初始化
	searchInfo[0] = refFooter.value.pageNum;
	startReq(...searchInfo);
});

function startReq(...searchInfo) {
	getUserList(...searchInfo)
		.then((res) => {
			state.tableData = res.data.items;
			state.total = res.data.total;
		})
		.catch((error) => {
			console.log(error);
		});
}

// 首页
function pageHome() {
	searchInfo[0] = 1;
	startReq(...searchInfo);
}

// 下一页
function pageNext() {
	searchInfo[0] = refFooter.value.pageNum;
	startReq(...searchInfo);
}

// 上一页
function pagePrev() {
	searchInfo[0] = refFooter.value.pageNum;
	startReq(...searchInfo);
}

// 当页码改变时
function changePage(p) {
	searchInfo[0] = p;
	// 重新请求将满足条件的数据渲染到页面
	startReq(...searchInfo);
}

/**
 * @function reset 重置
 * @param timeQuantum
 */
function reset() {
	// 日期选择
	timeQuantum.value = "";
}
// 点击查询时候触发的函数
function searchEvent() {
	// 搜索框里面的数据refSearch.value.goods
	// console.log(refSearch.value.goods);
	searchInfo[2] = refSearch.value.goods;
	// 开始时间
	searchInfo[3] =
		timeQuantum.value.length === 0 ? "" : Date.parse(timeQuantum.value[0]);
	// 结束时间
	searchInfo[4] =
		timeQuantum.value.length === 0 ? "" : Date.parse(timeQuantum.value[1]);

	// console.log(searchInfo);

	// 点击查询的时候再次调用接口
	getUserList(...searchInfo)
		.then((response) => {
			// console.log(state);
			state.tableData = response.data.items;
			state.total = response.data.total;

			if (state.total === 0) {
				alert("没有您要查询的用户");
			}
			// console.log(state);
		})
		.catch((error) => {
			console.log(error);
		});
}

/**
 * @function 一键导出成为Excel表格
 *
 */
function toExcel() {
	htmlToExcel("#table1", "用户");
}
</script>
<style lang="less" scoped>
.common-layout {
	width: 100%;
	.el-footer {
		display: flex;
		--el-footer-height: auto;
		box-sizing: content-box;
	}
	.el-header {
		padding: 20px 1px;
	}
	.el-main {
		padding: 20px 1px;
		margin: 0;
	}

	:deep(.search .content .left .select) {
		margin-left: 20px;
	}
	.block {
		font-size: 14px;
		margin: 40px 0;
		.option {
			margin-left: 14px;
			margin-right: 18px;
		}
	}
}
</style>
